<?php
use yii\helpers\Url;
use yii\helpers\Html;
/* @var $product_id */
/* @var $first_auction \app\Modules\Api\models\Auction*/
/* @var $auctions \app\Modules\Api\models\Auction[]*/
/* @var $avg integer*/
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>竞拍</title>
    <?=Html::jsFile('@api/js/jquery-2.1.0.js')?>
    <?=Html::jsFile('@api/js/echarts.common.min.js')?>
    <?=Html::cssFile('@api/css/mui.min.css')?>
    <?=Html::cssFile('@api/css/lishichengjiaojia.css')?>
</head>
<body>
<!--商品的简介-->
<div class="lishi_shopping mui-clearfix">
    <div class="mui-col-sm-6">
        <?=Html::img($product['first_pic'])?>
    </div>
    <div class="mui-col-sm-6">
        <p><?=$product['name'].$product['spec']?></p>
        <p>当前成交价：<span>&yen;<?=$first_auction->price?></span></p>
    </div>
</div>
<!--历史成交图-->
<div class="chengjiaotu" style="overflow: scroll;">
    <!--<canvas id="myChart" width="300" height="360"></canvas>-->
    <div id="main" style="height:400px;width: 600px"></div>
</div>
<!--拍中情况-->
<div class="qingkunag">
    <div class="qingkuangTop">
        <ul class="mui-clearfix">
            <li>拍中时间</li>
            <li>拍中者</li>
            <li>成交价</li>
            <li>对比均价差异</li>
        </ul>
    </div>
    <div class="qingkuangBottom">
        <ul>
            <?php foreach($auctions as $key=>$auction):?>
                <li>
                    <span><?=Date('Y-m-d',$auction->end_at)?></span>
                    <span><?=$auction->nickname?></span>
                    <span>&yen;<?=$auction->price?></span>
                    <span><?=abs(round($auction->price-$avg,2))?> <i class="mui-icon <?=$auction->price>$avg?'mui-icon-arrowthinup':'mui-icon-arrowthindown'?>"></i></span>
                </li>
            <?php endforeach;?>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title : {
            text: '最近20期成交价',
            x:"100px"
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['成交价'],
            //itemGap: "2px",// 各个item之间的间隔，单位px，默认为10，
            right:"100px"
        },
        //右上角工具条
//      toolbox: {
//          show : true,
//          feature : {
//              mark : {show: true},
//              dataView : {show: true, readOnly: false},
//              magicType : {show: true, type: ['line', 'bar']},
//              restore : {show: true},
//              saveAsImage : {show: true}
//          }
//      },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : <?=$labels?>, //x轴的数据
                axisLabel: {
                    interval:0,
                    rotate:40 ,
                    lineStyle:{
                        color:'#FF0000',
                        width:8,//这里是为了突出显示加上的
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
//                  formatter: '{value} °C',
                },
            }
        ],
        series : [
            {
                name:'成交价',
                type:'line',
                data:<?=$data?>,//成交的价格
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
        ],
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
</html>

